<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/deproj.css">
    <script src="js/jquery-1.9.0.min.js"></script>
</head>
<body>
<div class="haedtop">
    <div class="top">
        <div class="left">
            <span class="spana"><a href="#">无限道生态</a></span>
            <span class="spanb"><a href="#">添加到桌面</a></span>
        </div>
        <div class="right">
            <span><a href="#">登录</a></span>
            <span><a href="#">注册</a></span>
        </div>
    </div>
    <div class="body">
        <div class="logo">
        </div>
        <div class="search">
            <div class="bound">
                <input class="myinput" placeholder="请输入文字">
            </div>
        </div>
        <div class="sublist">
            <div class="sub1">
                <span class="subspan1">新品尝鲜</span>
                <span class="subspan2">海量商品</span>
            </div>
            <div class="sub2">
                <span class="subspan1">全额退款</span>
                <span class="subspan2">未达成全额退</span>
            </div>
            <div class="sub3">
                <span class="subspan1">全国包邮</span>
                <span class="subspan2">部分满意除外</span>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="footleft">
            <span><a href="#">首页</a></span>
            <span><a href="#">项目浏览</a></span>
            <span><a href="userinfo.html">我的众筹</a></span>
        </div>
        <div class="footright">
            <div class="hou1"><span class="spanbackground1"><a href="sponsorproject.html">发起项目</a></span></div>
            <div class="hou2"><span class="spanbackground2"><a href="#">新手帮助</a></span></div>
        </div>
    </div>
</div>
<div class="dpbodycontent">
    <div class="top">
        <div class="circle circlebg2" id="circle1"><span class="spannum">1</span><span class="spantext">项目及发起人信息</span></div>
        <div class="line"></div>
        <div class="circle circlebg1" id="circle2"><span class="spannum">2</span><span class="spantext" style="text-indent: -10px">回报设置</span></div>
        <div class="line"></div>
        <div class="circle circlebg1" id="circle3"><span class="spannum">3</span><span class="spantext" style="text-indent: -10px">确认信息</span></div>
    </div>
    <div class="mid">
        <div id="show1" style="display:block;">
            <div class="title"><div></div><span>项目发起人联系信息</span></div>
            <span>项目信息</span>
            <div class="hr"></div>
            <div class="type"><span>众筹类型：</span>
                <input type="radio" name="type" id="normal"><span>普通众筹</span>
                <input type="radio" name="type" id="freeuse"><span>免费试用</span>
            </div>
            <div class="type"><span class="spanradio">选择分类：</span>
                <input type="radio" name="selectclass"><span>影音</span>
                <input type="radio" name="selectclass"><span>公益</span>
                <input type="radio" name="selectclass"><span>书籍</span>
                <input type="radio" name="selectclass"><span>娱乐</span>
                <input type="radio" name="selectclass"><span>科技</span>
                <input type="radio" name="selectclass"><span>设计</span>
                <input type="radio" name="selectclass"><span>动漫</span>
                <input type="radio" name="selectclass"><span>游戏</span>
                <input type="radio" name="selectclass"><span>农业</span>
                <input type="radio" name="selectclass"><span>其他</span>
            </div>
            <div class="type" id="tryoutlink"><span >试用链接：</span>
                <input placeholder="请填写项目免费试用的链接" class="inputstyle">
            </div>
            <div class="type"><span>项目名称：</span>
                <input placeholder="项目名称不超过20个字" class="inputstyle">
            </div>
            <div class="area"><span>项目简介：</span>
                <textarea maxlength="500" class="textarea1" placeholder="简单介绍下你的项目，不超过500个字。"></textarea>
            </div>
            <div class="listimg"><span>列表图片：</span>
                <a href="javascript:;" class="file">选择文件
                    <input type="file" name="">
                </a><span>选择文件支持jpg、png、gif格式，大小不超过1M，建议尺寸：280*220px</span>
                <div class="addimg"><span>+Add image</span></div>
            </div>
            <div class="listimg"><span>项目图片：</span>
                <a href="javascript:;" class="file">选择文件
                    <input type="file" name="">
                </a><span>选择文件支持jpg、png、gif格式，大小不超过1M，建议尺寸：280*220px</span>
                <div class="addimg"><span>+Add image</span></div>
            </div>
            <div class="type"><span >视频介绍：</span>
                <input placeholder="请填写视频链接" class="inputstyle">
            </div>
            <div class="area"><span>规则说明：</span>
                <textarea maxlength="500" class="textarea1" style="height: 180px" placeholder="填写规则说明"></textarea>
            </div>
            <span>发起人信息</span>
            <div class="persontype"><span >个人(团队)简介：</span>
                <input placeholder="一句简介不超过40个字" class="inputstyle">
            </div>
            <div class="area"><span >详细介绍：</span>
            <textarea  class="textarea1" placeholder="详细介绍你自己或你的团队，并详细说明你与所发起项目
            之间的背景让支持者能够在最短的时间内了解到你，不超过160个字"></textarea>
            </div>
            <div class="type"><span >联系电话：</span>
                <input placeholder="此信息不会显示在项目页面内" class="inputstyle">
            </div>
        </div>
        <div id="show2" style="display:none;">
            <div class="title"><div></div><span>回报设置</span></div>
            <span>回报设置</span>
            <div class="hr"></div>
            <div class="type"><span>回报类型：</span>
                <input type="radio" name="type"><span>实物回报</span>
                <input type="radio" name="type"><span>虚拟回报</span>
            </div>
            <div class="type"><span>筹资金额：</span>
                <input class="inputstyle2"><span>元</span>
            </div>
            <div class="type"><span>支持金额：</span>
                <input class="inputstyle2"><span>元</span>
            </div>
            <div class="area"><span>回报内容：</span>
                <textarea class="textarea1" placeholder="简单介绍一下你的项目，不超过200个字"></textarea>
            </div>
            <div class="listimg"><span>说明图片：</span>
                <a href="javascript:;" class="file">选择文件
                    <input type="file" name="">
                </a><span>支持jpg、png、gif格式，大小不超过1M，建议尺寸：280*220px</span>
                <div class="addimg"><span>+Add image</span></div>
            </div>
            <div class="type"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;运费：</span>
                <input class="inputstyle2" placeholder="0"><span>元 “0”为包邮</span>
            </div>
            <div class="type"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发票：</span>
                <input type="radio" name="type" checked="checked"><span>不可开发票</span>
                <input type="radio" name="type"><span>可开发票(包括个人发票和自定义抬头发票)</span>
            </div>
            <div class="type"><span>回报时间：</span>
                <span>项目结束后 </span><input class="inputstyle3"><span>天，向支持者发送回报</span>
            </div>
        </div>
        <div id="show3" style="display:none;">
            <div class="title"><div></div><span>确认信息</span></div>
            <div class="surepreinfo">
                <div class="surepreinfoimg"></div>
                <div class="spaninfo">请先预览确认信息，提交后不能进行更改了哦</div>
            </div>
        </div>
    </div>
    <div class="below">
        <div class="null" id="null"></div>
        <a href="#" style="text-decoration: none" class="nextbtn" id="nextbtn">下一步</a>
        <a href="projectdetail.html" style="text-decoration: none" class="prebtn" id="prebtn">预览</a>
        <a href="#" style="text-decoration: none" class="subbtn" id="subbtn">提交</a>
        <a href="#" style="text-decoration: none" class="lastbtn" id="lastbtn">上一步</a>
    </div>
</div>
<div class="tail">
    <div class="left">
        <div class="top">
            <div class="bg1 div_l"><span class="spana">发起人创建项目</span></div>
            <div class="divarrow"><span > > </span></div>
            <div class="bg2 div_l"><span class="spana">项目获得支持</span></div>
            <div class="divarrow"><span> > </span></div>
            <div class="bg3 div_l"><span class="spana">发起人发放回报</span></div>
            <div class="divarrow"><span> > </span></div>
            <div class="bg4 div_l"><span class="spana">用户得到回报</span></div>
        </div>
        <div class="below">
            <span>关于我们</span><span>|</span>
            <span>服务条款</span><span>|</span>
            <span>项目教程</span><span>|</span>
            <span>新手帮助</span><span>|</span>
            <span>常见问题</span><span>|</span>
            <span>意见反馈</span>
        </div>
    </div>
    <div class="mid">
        <div class="weichat">
            <span>微信公众号</span>
            <img src="images/foot_ewm_05.png">
        </div>
    </div>
    <div class="right">
        <div class="div1"><span>联系我们（9:00 － 18:00）</span></div>
        <div class="div2"><span>400-000-0000</span></div>
        <div class="div3"><span>wuxiandao@zhongchou.com</span></div>
        <div class="div4"><span>qq群：123456789</span></div>
    </div>
</div>
<div class="copyright">
    <span>@版权所有</span>
</div>
</body>
</html>
<script>
    $(function () {
        var flag=0;
        $("#normal").click(function () {
            $("#tryoutlink").css("display","none");
        })

        $("#freeuse").click(function () {
            $("#tryoutlink").css("display","block");
        })
        
        $("#nextbtn").click(function () {
            if(flag==0){
                $("#show1").css("display","none");
                $("#show2").css("display","block");
                $("#lastbtn").css("display","inline-block");
                $("#circle1").css("background-color","#F8FAE1");
                $("#circle2").css("background-color","#0091F5");
                ++flag;
            }else  if(flag==1){
                $("#show2").css("display","none");
                $("#show3").css("display","block");
                $("#nextbtn").css("display","none");
                $("#prebtn").css("display","inline-block");
                $("#subbtn").css("display","inline-block");
                $("#null").css("display","inline-block");
                $("#circle2").css("background-color","#F8FAE1");
                $("#circle3").css("background-color","#0091F5");
                ++flag;
            }
        })
        
        $("#lastbtn").click(function () {
            if(flag==1){
                $("#show1").css("display","block");
                $("#show2").css("display","none");
                $("#lastbtn").css("display","none");
                $("#circle1").css("background-color","#0091F5");
                $("#circle2").css("background-color","#F8FAE1");
                --flag;
            }else if(flag==2){
                $("#show2").css("display","block");
                $("#show3").css("display","none");
                $("#nextbtn").css("display","inline-block");
                $("#prebtn").css("display","none");
                $("#subbtn").css("display","none");
                $("#null").css("display","none");
                $("#circle2").css("background-color","#0091F5");
                $("#circle3").css("background-color","#F8FAE1");
                --flag;
            }
        })
    })
</script>